<template>
  <div class="app-container">
    <el-form ref="form1" :model="form" :rules="submitRules" label-width="120px">
      <el-form-item label="会员姓名" prop="name">
        <el-input ref="name" v-model="form.name" />
      </el-form-item>
      <el-form-item label="会员手机" prop="phone">
        <el-input ref="phone" v-model="form.phone" />
      </el-form-item>
      <el-form-item label="会员密码" prop="password">
        <el-input ref="password" v-model="form.password" />
      </el-form-item>
      <el-form-item label="推荐人ID" prop="referencesId">
        <el-input ref="referencesId" v-model="form.referencesId" />
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" @click.native.prevent="generatePwd">生成密码</el-button>
        <el-button :loading="loading" type="primary" @click.native.prevent="onSubmit">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    const validateName = (rule, value, callback) => {
      if (value.length < 2) {
        callback(new Error('Please enter the correct name'))
      } else {
        callback()
      }
    }
    const validatePhone = (rule, value, callback) => {
      if (/^1[3456789]\d{9}$/.test(value)) {
        callback()
      } else {
        callback(new Error('Please enter the correct user phone'))
      }
    }

    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: '',
        phone: '',
        referencesId: '',
        password: ''
      },
      loading: false,
      submitRules: {
        name: [{ required: true, trigger: 'blur', validator: validateName }],
        phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form1.validate(valid => {
        console.log('valid ' + valid)
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/registerMember', this.form).then(() => {
            this.loading = false
            this.$message('注册成功')
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    generatePwd() {
      const lenght = this.form.phone.length
      if (lenght < 11) {
        this.$message('请输入手机号')
        return
      }
      const num1 = Math.floor(Math.random() * 6)
      const num2 = Math.floor(Math.random() * 6)
      const num3 = Math.floor(Math.random() * 6)
      const list = ['a', 'b', 'c', 'd', 'e', 'f']
      this.form.password = list[num1] + list[num2] + list[num3] + this.form.phone.substr(lenght - 4, 4)
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

